<template>
    <div class="osVip">

        <div class="searchArea">
            <span style="font-size: 13px"> 内容：</span>
            <el-input
                    class="nameInput"
                    placeholder="请输入内容"
                    size="small">
            </el-input>
            <el-button type="primary" size="small" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" size="small" icon="el-icon-refresh-right">重置</el-button>
        </div>

        <div class="actionArea">
            <el-button type="primary" size="small" icon="el-icon-plus">添加</el-button>
        </div>

        <div class="dataArea">
            <el-table
                    :header-cell-style="{'text-align':'center','height':'49px','color':'black','background-color':'rgb(250,250,250)'}"
                    :cell-style="{'text-align':'center'}"
                    border
                    size="small"
                    :data="osVipList"
            >
                    <el-table-column
                            prop="id"
                            label="主键"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="updateTime"
                            label="更新时间"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="vipName"
                            label="会员名称"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="userId"
                            label="用户id"
                    >
                    </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" style="color: red" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="page">
                <el-pagination
                        background
                        :page-sizes="[10,20,30,40]"
                        layout=" total,prev, pager, next,sizes, jumper"
                        :total="100">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "osVip",
        data() {
            return {
                osVipList: []
            }
        },
        page: {
            pageNo: 1,
            pageSize: 10
        },
        searchParams: {},
        urls: [
            {list: '/osVip/osVip/list'},
            {add: '/osVip/osVip/add'},
            {edit: '/osVip/osVip/edit'},
            {deleteById: '/osVip/osVip/deleteById'},
            {deleteBatch: '/osVip/osVip/deleteBatch'},
        ]
    }
</script>

<style scoped lang="scss">
    .osVip {
        padding: 20px;

        .dataArea {
            margin-top: 20px;

            .page {
                text-align: center;
                margin-top: 20px;
            }
        }

        .actionArea {
            margin-top: 20px;
        }

        .searchArea {
            .nameInput {
                margin-right: 20px;
                width: 180px;
            }
        }
    }
</style>

<style>
    .searchArea .el-button {
        border-radius: 0;
    }

    .actionArea .el-button {
        border-radius: 0;
    }

    .nameInput input {
        border-radius: 0;
    }
</style>
